<template>
    <div :style="style">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">

/**
 * grid 布局元素
 *
 * 如果行列都只占一格，可以直接使用 div
 */
interface Props {
    // 列数
    colspan?: number | string;
    // 行数
    rowspan?: number | string;
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
    colspan: 1, rowspan: 1
})

const style = {gridArea: `span ${props.rowspan}/span ${props.colspan}`};
</script>
